<template>
  <div class="body-bg">
    <header-module :originName="'parking'" :title="'服务区智慧停车系统'"></header-module>
    <!-- 头部 -->
    <div class="content">
      <div class="svg-bg" style="z-index:1;">
        <ParkingAreaASvg  @clickVideo="clickVideo" v-show="isAreaA"/>
        <ParkingAreaBSvg  @clickVideo="clickVideo" v-show="!isAreaA"/>
      </div>
      <div class="content_info" style="z-index:1;">
        <!-- 服务区 -->
        <div class="yz-select-server">
          <!-- 下拉框 -->
          <!-- <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区" @change="serverHandleChange"></el-cascader>
          </div> -->
          <div class="yz-box-items" style="height: 3.2vh;">
            <div class="yz-box-item" v-for="(item,index) in abItems" @click="abClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
              <div v-else class="yz-box-item-text">{{item.name}}</div>
            </div>
          </div>

          <div class="yz-box-items" style="height: 3.2vh;">
            <div class="yz-box-item" v-for="(item,index) in vaildateItems" @click="vaildateClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected">{{item.name}}</div>
              <div v-else class="yz-box-item-text">{{item.name}}</div>
            </div>
          </div>
        </div>
        <!-- 车型流量 -->
        <div class="content_info_item">
            <contentTitle :title="'车型流量'"/>
            <div class="body-box-bg">
              <div class="t-l"></div><div class="t-r"></div>
              <div class="b-l"></div><div class="b-r"></div>
              <div class="yx-xs-6">
                <div class="yx-car-item car"></div>
                <div class="yx-car-content">
                  <div class="yx-car-content-text">
                    小客车
                    <span>{{state.left1Data.xkczb}}</span>
                  </div>
                  <div class="yx-car-content-num">
                    <!-- {{state.left1Data.xkc}} -->
                    <countTo :startVal='startVal' :endVal='state.left1Data.xkc||0' :duration='5000' autoplay="true"></countTo>
                  </div>
                </div>
              </div>
              <div class="yx-xs-6">
                <div class="yx-car-item bus"></div>
                <div class="yx-car-content">
                  <div class="yx-car-content-text">
                    大客车
                    <span>{{state.left1Data.dkczb}}</span>
                  </div>
                  <div class="yx-car-content-num">
                    <!-- {{state.left1Data.dkc}} -->
                    <countTo :startVal='startVal' :endVal='state.left1Data.dkc||0' :duration='5000' autoplay="true"></countTo>
                  </div>
                </div>
              </div>
              <div class="yx-xs-6">
                <div class="yx-car-item smallChart"></div>
                <div class="yx-car-content">
                  <div class="yx-car-content-text">
                    小货车
                    <span>{{state.left1Data.xhczb}}</span>
                  </div>
                  <div class="yx-car-content-num">
                    <!-- {{state.left1Data.xhc}} -->
                    <countTo :startVal='startVal' :endVal='state.left1Data.xhc||0' :duration='5000' autoplay="true"></countTo>
                  </div>
                </div>
              </div>
              <div class="yx-xs-6">
                <div class="yx-car-item bigChart"></div>
                <div class="yx-car-content">
                  <div class="yx-car-content-text">
                    大货车
                    <span>{{state.left1Data.dhczb}}</span>
                  </div>
                  <div class="yx-car-content-num">
                    <!-- {{state.left1Data.dhc}} -->
                    <countTo :startVal='startVal' :endVal='state.left1Data.dhc||0' :duration='5000' autoplay="true"></countTo>
                  </div>
                </div>
              </div>
              <div class="yx-xs-6">
                <div class="yx-car-item whp"></div>
                <div class="yx-car-content">
                  <div class="yx-car-content-text">
                    危化品
                    <span>{{state.left1Data.whpzb}}</span>
                  </div>
                  <div class="yx-car-content-num">
                    <!-- {{state.left1Data.whp}} -->
                    <countTo :startVal='startVal' :endVal='state.left1Data.whp||0' :duration='5000' autoplay="true"></countTo>
                  </div>
                </div>
              </div>
              <div class="yx-xs-6">
                <div class="yx-car-item otherCar"></div>
                <div class="yx-car-content">
                  <div class="yx-car-content-text">
                    其它车
                    <span>{{state.left1Data.qtzb}}</span>
                  </div>
                  <div class="yx-car-content-num">
                    <!-- {{state.left1Data.qt}} -->
                    <countTo :startVal='startVal' :endVal='state.left1Data.qt||0' :duration='5000' autoplay="true"></countTo>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <!-- 车辆来源地排行 -->
        <div class="content_info_item">
          <contentTitle :title="'车辆来源地排行'"/>
          <div class="body-box-bg">
            <div class="t-l"></div><div class="t-r"></div>
            <div class="b-l"></div><div class="b-r"></div>
            <div class="yz-process-items">
              <div class="yz-process-item" v-for="(item,index) in state.left2Data.lydph">
                <div class="province">{{item.province}}</div>
                <div class="nums">
                <countTo :startVal='startVal' :endVal='item.cnt||0' :duration='5000' autoplay="true" :decimals="2"></countTo>
                万
                </div>
                <div class="process-parent">
                  <div class="process">
                    <div :style="{width: item.zb}"></div>
                  </div>
                  <div class="rate">
                    <!-- {{item.zb}} -->
                    <countTo :startVal='startVal' :endVal='item.zb2||0' :duration='5000' autoplay="true"></countTo>%
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 年度车流对比 -->
        <div class="content_info_item">
          <contentTitle :title="'年度车流对比'"/>
          <div class="body-box-bg">
            <div class="t-l"></div><div class="t-r"></div>
            <div class="b-l"></div><div class="b-r"></div>
            <div class="chart" ref="ndcldbRef"></div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="content_map">
        <div class="yz-map-header">
          <div class="car_flow blueNum">
            <div class="car_flow_text">{{ carFlowOptions.carFlowText }}</div>
            <div class="car_flow_num">
              <div class="perNum" v-for="(item,index) in carFlowOptions.carFlowNum">
                <!-- 有背景图，然后把数字拆分  -->
                <countTo :startVal='0' :endVal='item||0' :duration='5000'></countTo>
              </div>
            </div>
            <div class="car_flow_unit">辆</div>
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="content_info" style="z-index:1;">
        <div class="yz-box2-items" style="justify-content:flex-end">
          <div class="yz-box2-item" style="width: 25%">
            <div class="box-top-left"></div>
            <div class="yz-box2-p">
              <countTo :startVal='startVal' :endVal='state.ratioData.kehuobi_kc||0' :duration='5000' autoplay="true"></countTo>:
              <countTo :startVal='startVal' :endVal='state.ratioData.kehuobi_hc||0' :duration='5000' autoplay="true"></countTo>
            </div>
            <div class="yz-box2-p center">客货比</div>
          </div>
          <div class="yz-box2-item" style="width: 30%">
            <div class="yz-box2-p">
              <!-- {{state.ratioData.pjtlsj_kc}} -->
              <countTo :startVal='startVal' :endVal='state.ratioData.pjtlsj_kc||0' :duration='5000' autoplay="true"></countTo>分钟
            </div>
            <div class="yz-box2-p center">客车平均停留</div>
          </div>
          <div class="yz-box2-item" style="width: 30%">
            <div class="yz-box2-p">
              <!-- {{state.ratioData.pjtlsj_hc}} -->
              <countTo :startVal='startVal' :endVal='state.ratioData.pjtlsj_hc||0' :duration='5000' autoplay="true"></countTo>分钟
            </div>
            <div class="yz-box2-p center">货车平均停留</div>
          </div>
          <div class="yz-box2-item" style="width: 30%">
            <div class="yz-box2-p">
              <!-- {{state.ratioData.cwzyl}}% -->
              <countTo :startVal='startVal' :endVal='state.ratioData.cwzyl||0' :duration='5000' autoplay="true"></countTo>%
            </div>
            <div class="yz-box2-p center">车位占用率</div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'车位使用及入区占用'"/>
          <div class="body-box-bg">
            <div class="t-l"></div><div class="t-r"></div>
            <div class="b-l"></div><div class="b-r"></div>
            <div class="yx-xs-6">
              <div class="pie-list">
                <div class="h1">总车位：
                  {{state.right1Data.zongchewei}}
                </div>
                <chart-hx-pie :data="state.right1Data.cwData1"></chart-hx-pie>
                <div class="h2">{{abItems[1].name}}车位：
                  {{state.right1Data.cw_a}}
                </div>
                <div class="pie-list-item" v-for="(item,index) in state.right1Data.cwData1">
                  <div class="pie-square" :style="{background:item.itemStyle.color}"></div>
                  <div class="pie-text">{{ item.name }}：
                    <!-- {{ item.value2 }} -->
                    <countTo :startVal='startVal2' :endVal='item.value2||0' :duration='5000' autoplay="true"></countTo>
                  </div>
                </div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="pie-list">
                <div class="h1">总占用：
                  <!-- {{state.right1Data.zongzhanyong}} -->
                  <countTo :startVal='startVal2' :endVal='state.right1Data.zongzhanyong||0' :duration='5000' autoplay="true"></countTo>
                </div>
                <chart-hx-pie :data="state.right1Data.cwData2"></chart-hx-pie>
                <div class="h2">{{abItems[2].name}}车位：
                  {{state.right1Data.cw_b}}
                </div>
                <div class="pie-list-item" v-for="(item,index) in state.right1Data.cwData2">
                  <div class="pie-square" :style="{background:item.itemStyle.color}"></div>
                  <div class="pie-text">{{ item.name }}：
                    <!-- {{ item.value2 }} -->
                    <countTo :startVal='startVal2' :endVal='item.value2||0' :duration='5000' autoplay="true"></countTo>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'全局车位监测'"/>
          <div class="body-box-bg">
            <div class="t-l"></div><div class="t-r"></div>
            <div class="b-l"></div><div class="b-r"></div>
            <div class="yx-xs-6">
              <div class="video-box-dd">
                <img :src="videoImgWhpA" alt="" @click="seeVideo(state.whp_video_a)">
                <div class="p">{{abItems[1].name}}</div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="video-box-dd">
                <img :src="videoImgWhpB" alt="" @click="seeVideo(state.whp_video_b)">
                <div class="p">{{abItems[2].name}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'问题车辆记录'"/>
          <div class="body-box-bg">
            <div class="t-l"></div><div class="t-r"></div>
            <div class="b-l"></div><div class="b-r"></div>
            <table class="filler-table">
              <thead>
                <tr>
                  <th>车牌号</th>
                  <th>分区</th>
                  <th>进入时间</th>
                  <!-- <th>停留时间</th> -->
                  <th>问题来源</th>
                  <th>相机</th>
                </tr>
              </thead>
            </table>
            <el-carousel height="200px" direction="vertical" :autoplay="true" style="width: 100%" indicator-position="none" interval="4000">
              <el-carousel-item v-for="(items,index) in chunkArray(state.right3Data,5)">
                <table class="filler-table">
                  <tbody>
                    <tr v-for="(item,index) in items" :class="item.trSelect">
                      <td>{{item.cph}}</td>
                      <td>{{item.fq}}</td>
                      <td>{{item.jrsj}}</td>
                      <!-- <td>{{item.tlsj}}</td> -->
                      <td>{{item.typename}}</td>
                      <td><div class="camera" v-if="item.typename === '错误停车'" @click="yctcVideo(item.fq)"></div></td>
                    </tr>
                  </tbody>
                </table>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
  </div>
  <video-player ref="vPlayerRef" :video-source="videoSource" @closeVideo="closeVideo" v-if="showVideoLayer" style="z-index:1"></video-player>
   <!-- 底部菜单 -->
   <fwq-bottom-menu></fwq-bottom-menu>
</template>
<script setup>
import './../assets/content.css'
import 'dayjs/locale/zh-cn';
import {getCurrentInstance, onMounted, reactive, ref,watch,onUnmounted} from "vue";
import HeaderModule from "./components/headerModule.vue";
import {drawLine} from "../util/chartUtil.js";
import {CountTo} from "vue3-count-to"; // 导入中文语言包
import svg1 from '../assets/img/public/bodyModule/车位图.svg';
import svg2 from '../assets/img/public/bodyModule/车位图2.svg';
import VideoPlayer from "./components/videoPlayer.vue";
import ContentTitle from "./components/contentTitle.vue";
import ChartHxPie from "./components/chartHxPie.vue";
import {ajaxRequest} from "../api/code.js";
import FwqBottomMenu from "./components/fwqBottomMenu.vue";
import $ from 'jquery';
import ParkingAreaASvg from "./components/parking_more/parkingAreaASvgXianghe.vue";
import ParkingAreaBSvg from "./components/parking_more/parkingAreaBSvgXianghe.vue";

import {ElMessage} from "element-plus";


const startVal = ref(0);
const startVal2 = ref(0);

const chart = getCurrentInstance().proxy.$echarts

/**
 *
 * @param array 源数组
 * @param chunkSize 拆分成几个
 * @returns 拆分函数
 */
function chunkArray(array, chunkSize) {
  let result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
}


const videoImgWhpA = ref("")
const videoImgWhpB = ref("")
//设置服务区下拉框值
// const selectOptions = ref([{
//   id: 24193,
//   value: '河北高速燕赵驿行集团有限公司',
//   label: '河北高速燕赵驿行集团有限公司',
//   children: [{
//     id: 349,
//     value: '滦州服务区',
//     label: '滦州服务区'
//   }, {
//     id: 0,
//     value: '山海关服务区',
//     label: '山海关服务区'
//   }, {
//     id: 0,
//     value: '玉田服务区',
//     label: '玉田服务区'
//   }, {
//     id: 0,
//     value: '丰润停车区',
//     label: '丰润停车区'
//   }, {
//     id: 0,
//     value: '迁安停车区',
//     label: '迁安停车区'
//   }, {
//     id: 0,
//     value: '卢龙服务区',
//     label: '卢龙服务区'
//   }, {
//     id: 0,
//     value: '北戴河服务区',
//     label: '北戴河服务区'
//   }, {
//     id: 0,
//     value: '香河服务区',
//     label: '香河服务区'
//   }]
// }])

//服务区事件
const serverLayers = ref(false);
const serverHandleChange = (selectItem) => {
  console.log(selectItem);
  serverLayers.value = true;
}

//ab选择
let showSvg = svg1;
const areacode = ref("01")
const abItems = ref([{
  name:"综合",
  selected: false
},{
  name:"东(南)",
  selected: true
},{
  name:"西(北)",
  selected: false
}]);


const validatecode = ref('day')
const vaildateItems = ref([{
  name:"年",
  selected: false
},{
  name:"月",
  selected: false
},{
  name:"日",
  selected: true
}]);

const isAreaA = ref(true)
//AB区切换事件
const abClick = function (selectIndex) {
  abItems.value.forEach((row, index) => {
    row.selected = (index === selectIndex);
  });

  if (selectIndex > 1){
    showSvg = svg2;
  }else{
    showSvg = svg1;
  }

  if(selectIndex === 0){
    isAreaA.value=true
    areacode.value = null
  }
  else if(selectIndex === 1){
    isAreaA.value=true
    areacode.value = "01"
  }
  else if(selectIndex === 2){
    isAreaA.value=false
    areacode.value = "02"
  }
  //分区切换刷新数据
}

//年月日切换事件
const vaildateClick = function (selectIndex) {
  vaildateItems.value.forEach((row, index) => {
    row.selected = (index === selectIndex);
  });
  if(selectIndex === 0){
    validatecode.value = "year"
  }
  else if(selectIndex === 1){
    validatecode.value = "month"
  }
  else if(selectIndex === 2){
    validatecode.value = "day"
  }
  //分区切换刷新数据
  getLeft1Data()
  getLeft2Data()
  getRight3Data()
}

const state = reactive({
  compflag : "luanzhou",
  whp_video_a:'',
  whp_video_b:'',
  video_cdz_a_1:'',
  video_cdz_b_1:'',
  ratioData :{
    kehuobi_kc : "0",
    kehuobi_hc : "0",
    pjtlsj_kc:"0",
    pjtlsj_hc:"0",
    cwzyl:"0",
  },
  left1Data :{
    zs:1,
    xkc:0,
    xkczb:'0%',
    dkc:0,
    dkczb:'0%',
    xhc:0,
    xhczb:'0%',
    dhc:0,
    dhczb:'0%',
    whp:0,
    whpzb:'0%',
    qt:0,
    qtzb:'0%'
  },
  left2Data :{
    clzs:10,
    lydph:[
      {
        province:"河北",
        cnt:0,
        zb:"10%"
      },{
        province:"河南",
        cnt:0,
        zb:"30%"
      }
    ]
  },
  right1Data :{
    zongchewei : 0,
    zongzhanyong : 0,
    cw_a : 0,
    zy_a : 0,
    sy_a : 0,
    cw_b : 0,
    zy_b : 0,
    sy_b : 0,
    dcwzy_a :0,
    whpcwzy_a :0,
    dcwzy_b :0,
    whpcwzy_b :0,
    /*车位使用占及入区占比*/
    cwData1 : [{
      name: '占用',
      value: 0.8,//这里传入的值要小于1  也就是百分比
      value2 : 0,
      itemStyle: {
        color: '#00FFAF'
      }
    }, {
      name: '剩余',
      value: 0.2,
      value2 : 0,
      itemStyle: {
        color: '#CCCCCC'
      }
    }],

    /*车位使用占及入区占比*/
    cwData2 : [{
      name: '占用',
      value: 0.6,//这里传入的值要小于1  也就是百分比
      value2 : 0,
      itemStyle: {
        color: '#1048d2'
      }
    }, {
      name: '剩余',
      value: 0.4,
      value2 : 0,
      itemStyle: {
        color: '#CCCCCC'
      }
    }]
  },
  right3Data : [
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35',trSelect:'tr-select'},
    {cph:'粤A22778',fq:'北区',jrsj:'2024-08-22 10：10',tlsj:'35',typename:"错误停车"},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35',typename:"错误停车"},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'},
    {cph:'粤A22778',fq:'南区',jrsj:'2024-08-22 10：10',tlsj:'35'}
  ]

})


//年度车流对比
const currentYear = new Date().getFullYear();
// 计算去年和今年的年份
const lastYear = currentYear - 1;
const thisYear = currentYear;
const ndcldb_legend = ref([`${lastYear}年`, `${thisYear}年`]);
const ndcldb_x = ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'])
const ndcldb_y_1 = ref([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
const ndcldb_y_2 = ref([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])

const ndcldbRef = ref();
const ndcldbOpt = ref({
  color: ['#5AFFFA', '#F44538'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ndcldb_legend,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ndcldb_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'rgb(207,206,206)' // 设置轴线颜色
        }
      },
      axisTick:{
        show: false
      },
      axisLabel: {
        interval:0,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: { // 设置轴标签样式
        textStyle: {
          color: 'white' // 设置轴标签颜色
        }
      },
      axisLine: { // 设置轴线样式
        show: true,
        lineStyle: {
          color: 'rgb(207,206,206)' // 设置轴线颜色
        }
      },
      splitLine: { //网格线：隐藏
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed', // 线型为虚线
        }
      },
    }
  ],
  series: [
    {
      name: ndcldb_legend.value[0],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 4,
      lineStyle: {
        width: 2
      },
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(90,255,250,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ndcldb_y_1.value
    },
    {
      name: ndcldb_legend.value[1],
      type: 'line',
      // stack: 'Total',
      smooth: true,
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 4,
      lineStyle: {
        width: 2
      },
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(244,69,56,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ndcldb_y_2.value
    }
  ]
});

/* 中间车流量统计 */
const carFlowZoneOptions = ref([{name: '外场',selected:true}, {name: '内场',selected: false}])
const carFlowOptions = ref({
  carFlowText: "车流量",
  carFlowNum: "0"
})
const zoneClick = function (selectIndex){
  carFlowZoneOptions.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
}

/* 视频相关 */
const videoSource = ref("https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4")
const showVideoLayer = ref(false);
const videoSessionId = ref(null)
const vPlayerRef = ref(null)
const closeVideo = function (){
  if(videoSessionId.value){
    ajaxRequest('post', 'ivmsCloseStream', {sessionid: videoSessionId.value})
  }
  showVideoLayer.value = false;
}

async function seeVideo(chanpubid){
  const params = {
    chanpubid : chanpubid
  }
  const res = await ajaxRequest('post', 'ivmsRealPlay', params)
  if(res.data && res.data.errcode == 0){
    videoSessionId.value = res.data.SessionId
    videoSource.value = res.data.flvurl
    showVideoLayer.value = true;
  } else{
    ElMessage ({
      type: 'warning',
      message: '设备异常!'
    });
  }
}

//异常停车相机
async function yctcVideo(areaname) {
  if (areaname.indexOf('东') > -1 || areaname.indexOf('南') > -1) {
    seeVideo(state.video_cdz_a_1)
  }
  else if (areaname.indexOf('西') > -1 || areaname.indexOf('北') > -1) {
    seeVideo(state.video_cdz_b_1)
  }
}


//车位id
const parkingSvgId = ref(null)

let ndcldbChart;
let timer = null
let timer2 = null
// 刷新页面数据
watch([areacode],(newVal, oldVal) => {
   if (timer) clearInterval(timer)
   refreshData()
   if (timer2) clearInterval(timer2)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
  if (timer2) clearInterval(timer2)
})

const isFirstFlagA = ref(true)
const isFirstFlagB = ref(true)
onMounted(() => {
  initConfig()
  ndcldbChart = drawLine(ndcldbRef.value, ndcldbOpt.value);
  //刷新数据
  refreshData()
})




//刷新数据
const initConfig = () => {
  //从配置文件中加载
  fetch("config/parking/comp.json")
    .then(response => response.json())
    .then(data => {
      state.compflag = "xianghe"
      state.whp_video_a = data["video_a_1_"+state.compflag]
      state.whp_video_b = data["video_a_2_"+state.compflag]
      state.video_cdz_a_1 = data['video_cdz_a_1_'+state.compflag]
      state.video_cdz_b_1 = data['video_cdz_b_1_'+state.compflag]
      if(data.abItems){
        abItems.value = data.abItems
      }

      videoImgWhpA.value = process.env.VITE_BASE_URL + "config/parking/"+data['video_img_a_1_'+state.compflag]
      videoImgWhpB.value = process.env.VITE_BASE_URL + "config/parking/"+data['video_img_a_2_'+state.compflag]
      
      //从配置文件中加载
      fetch("config/parking/parkingSvgId_"+state.compflag+".json")
        .then(response => response.json())
        .then(data2 => {
          parkingSvgId.value = data2
        })
    });
}
//刷新数据
const refreshData = () => {
  getPjtlsjData()//平均停留时间
  getCwzyl()//车位占用率
  getLeft1Data()
  getLeft2Data()
  getLeft3Data()
  getRight1Data()
  getStaParkStatusRec()//车位占用最新状态
  getRight3Data()
  // //定时刷新
  autoRefreshData()
  autoRefreshData2()
}

// 1分钟刷新
const autoRefreshData = () => {
  timer = setInterval(async () => {
    getPjtlsjData()//平均停留时间
    getRight1Data()//车位占用
    getCwzyl()//车位占用率
    //当日数据时，车型流量自动刷新
    if("day" === validatecode.value){
      getLeft1Data()
      getLeft2Data()
    }
    getStaParkStatusRec()//车位占用最新状态
    getRight3Data()//问题车辆记录
    
  }, 60*1000)
}
// 10分钟刷新
const autoRefreshData2 = () => {
  timer2 = setInterval(async () => {
    tccw()
  }, 60*1000*10)
}

/**
 * 车型流量
 */
 async function getLeft1Data() {
  const params = {
    areacode: areacode.value
    ,validatecode : validatecode.value
  }
  const res = await ajaxRequest('post', 'getParkingCxll', params)
  if (res.data) {
    //入区车流总数
    carFlowOptions.value.carFlowNum = res.data.zs+"" ?? "0"
    state.left1Data.zs = res.data.zs
    state.left1Data.xkc = res.data.xkc
    state.left1Data.xkczb = res.data.zs ? (res.data.xkc/res.data.zs*100).toFixed(2)+"%" : "0%"
    state.left1Data.dkc = res.data.dkc
    state.left1Data.dkczb = res.data.zs ? (res.data.dkc/res.data.zs*100).toFixed(2)+"%" : "0%"
    state.left1Data.xhc = res.data.xhc
    state.left1Data.xhczb = res.data.zs ? (res.data.xhc/res.data.zs*100).toFixed(2)+"%" : "0%"
    state.left1Data.dhc = res.data.dhc
    state.left1Data.dhczb = res.data.zs ? (res.data.dhc/res.data.zs*100).toFixed(2)+"%" : "0%"
    state.left1Data.whp = res.data.whp
    state.left1Data.whpzb = res.data.zs ? (res.data.whp/res.data.zs*100).toFixed(2)+"%" : "0%"
    state.left1Data.qt = res.data.qt
    state.left1Data.qtzb = res.data.zs ? (res.data.qt/res.data.zs*100).toFixed(2)+"%" : "0%"
    

    //客货比
    let kc = res.data.xkc + res.data.dkc
    let hc = res.data.xhc + res.data.dhc
    state.ratioData.kehuobi_kc ="0"
    state.ratioData.kehuobi_hc ="0"
    if((kc+hc) > 0){
      let kczb = (kc/(kc+hc)*10).toFixed(0)
      state.ratioData.kehuobi_kc = kczb
      state.ratioData.kehuobi_hc = (10-kczb)
    }
    //修改startVal 出现动态效果
    if(startVal.value == 0) {
      startVal.value = 1;
    } else if (startVal.value == 1) {
      startVal.value = 0;
    }
  }
}

/**
 * 车辆来源地排行
 */
 async function getLeft2Data() {
  const params = {
    page:1,
    limit:6,
    areacode: areacode.value
    ,validatecode : validatecode.value
  }
  // state.left2Data.lydph = []
  const res = await ajaxRequest('post', 'getParkingCllydph', params)
  if (res.data && res.data.clzs && res.data.lydph.length > 0) {
    state.left1Data.clzs = res.data.clzs
    res.data.lydph.forEach((item,index)=>{
      state.left2Data.lydph[index] = {
        province:item.province,
        cnt: (item.cnt/10000).toFixed(2),
        zb:(item.cnt/res.data.clzs*100).toFixed(2)+"%",
        zb2:(item.cnt/res.data.clzs*100).toFixed(2)
      }
    })
  }
}


/**
 * 年度车流对比
 */
async function getLeft3Data() {
  const params = {
    areacode: areacode.value
  }
  ndcldb_y_1.value = []
  ndcldb_y_2.value = []
  const res = await ajaxRequest('post', 'getParkingNdcldb', params)
  if (res.data) {
    if(res.data.thisyeardata){
      res.data.thisyeardata.forEach(item=>{
        ndcldb_y_2.value[parseInt(item.month-1)] = item.cnt
      })
    }
    if(res.data.lastyeardata){
      res.data.lastyeardata.forEach(item=>{
        ndcldb_y_1.value[parseInt(item.month-1)] = item.cnt
      })
    }
    // ndcldbOpt.value.legend.data = ndcldb_legend
    // ndcldbOpt.value.xAxis.data = ndcldb_x.value
    // ndcldbOpt.value.series[0].name = ndcldb_legend.value[0]
    // ndcldbOpt.value.series[0].data = ndcldb_y_1.value
    // ndcldbOpt.value.series[1].name = ndcldb_legend.value[1]
   
  }
  ndcldbOpt.value.series[0].data = ndcldb_y_1.value
  ndcldbOpt.value.series[1].data = ndcldb_y_2.value
  ndcldbChart.setOption(ndcldbOpt.value)
}

/**
 * 车位使用及入区占用
 */
async function getRight1Data() {
  const res = await ajaxRequest('post', 'getParkingCwqk', {})
  if (res.data && res.data.length > 0) {
    //A区总车位
    state.right1Data.cw_a = res.data[0].zcw;
    //A区占用车位
    state.right1Data.zy_a = res.data[0].zycw;
    //A区剩余车位
    state.right1Data.sy_a = res.data[0].sycw;
    //B区总车位
    state.right1Data.cw_b = res.data[1].zcw;
    //B区占用车位
    state.right1Data.zy_b = res.data[1].zycw;
    //B区剩余车位
    state.right1Data.sy_b = res.data[1].sycw;
    //总车位=A区车位+B区车位
    state.right1Data.zongchewei = state.right1Data.cw_a + state.right1Data.cw_b;
    //总占用=A区占用车位+B区占用车位
    state.right1Data.zongzhanyong = state.right1Data.zy_a + state.right1Data.zy_b;
    //A区占用率
    state.right1Data.cwData1[0].value = state.right1Data.zy_a/state.right1Data.cw_a;
    state.right1Data.cwData1[0].value2 = state.right1Data.zy_a;
    //A区剩余率
    state.right1Data.cwData1[1].value = state.right1Data.sy_a/state.right1Data.cw_a;
    state.right1Data.cwData1[1].value2 = state.right1Data.sy_a;
    //B区占用率
    state.right1Data.cwData2[0].value = state.right1Data.zy_b/state.right1Data.cw_b;
    state.right1Data.cwData2[0].value2 = state.right1Data.zy_b;
    //B区剩余率
    state.right1Data.cwData2[1].value = state.right1Data.sy_b/state.right1Data.cw_b;
    state.right1Data.cwData2[1].value2 = state.right1Data.sy_b;

    //A区大车位占用
    state.right1Data.dcwzy_a = res.data[0].largespaceused
    //A区危化品车位占用
    state.right1Data.whpcwzy_a = res.data[0].dcspaceused
    //B区大车位占用
    state.right1Data.dcwzy_b = res.data[1].largespaceused
    //B区危化品车位占用
    state.right1Data.whpcwzy_b = res.data[1].dcspaceused

    //修改startVal 出现动态效果
    if(startVal2.value == 0) {
      startVal2.value = 1;
    } else if (startVal2.value == 1) {
      startVal2.value = 0;
    }
  }
}

/**
 * 车位占用率
 */
async function getCwzyl() {
  const params = {
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getParkingCwzyl', params)
  if (res.data && res.data.cwzyl) {
    state.ratioData.cwzyl = (res.data.cwzyl*100).toFixed(0)+""
  }
}

/**
 * 获取平均停留时间
 */
async function getPjtlsjData() {
  const res = await ajaxRequest('post', 'getParkingPjtlsj', {areacode: areacode.value,vehicletype:'kc'})
  if (res.data) {
    //平均停留时间*2/3
    state.ratioData.pjtlsj_kc = (res.data.pjtlsj_zt*2/3).toFixed(0)
  }
  const res2 = await ajaxRequest('post', 'getParkingPjtlsj', {areacode: areacode.value,vehicletype:'hc'})
  if (res2.data) {
    //平均停留时间*2/3
    state.ratioData.pjtlsj_hc = (res2.data.pjtlsj_zt*2/3).toFixed(0)
  }
}

//有可能要实时刷新厕位状态 所以取数逻辑暂时放在组件里
async function getStaParkStatusRec() {
  //如果json还没加载完就等2s
  if(!parkingSvgId.value){
    setTimeout(() => {
      getStaParkStatusRec()
    }, 1000);
  }
  else{

    ajaxRequest('post', 'getStaParkStatusRec', { areacode: areacode.value }).then(res => {
      if(res.data && res.data.length>0){
        res.data.forEach(item => {
          var code = item.parkspotcode;
          if(parkingSvgId.value[code]){
            if(item.type == "0" && item.vehicletype == "3"){
              if(item.parkedflag == "1"){
                //正常停车
                if(item.platecolor && item.platecolor == "4"){
                  $("#"+parkingSvgId.value[code]+"-2").css("display", "none" )
                  $("#"+parkingSvgId.value[code]).css("display", "block" )
                }
                //异常停车（非绿牌停车）
                else if(item.platecolor && item.platecolor != "4"){
                  $("#"+parkingSvgId.value[code]+"-2").css("display", "block" )
                  $("#"+parkingSvgId.value[code]).css("display", "none" )
                }
                else {
                  $("#"+parkingSvgId.value[code]+"-2").css("display", "none" )
                  $("#"+parkingSvgId.value[code]).css("display", "block" )
                }
              }
              else{
                $("#"+parkingSvgId.value[code]+"-2").css("display", "none" )
                $("#"+parkingSvgId.value[code]).css("display", "none" )
              }
            }
            else{
              if(item.parkedflag == "1"){
                $("#"+parkingSvgId.value[code]).css("display", "block" )
              }else{
                $("#"+parkingSvgId.value[code]).css("display", "none" )
              }
            }
          }
        })
      }
      //首次填充大车位
      if (isFirstFlagA.value && (!areacode.value || "01" === areacode.value)) {
        tccw()
      }
      if (isFirstFlagB.value && "02" === areacode.value) {
        tccw()
      }
    })
  }
}


//获取黑名单
async function getRight3Data() {
  const res = await ajaxRequest('post', 'getParkingHmd', { page: 1, limit: 50, validatecode: validatecode.value, areacode: areacode.value })
  if (res.data) {
    
    state.right3Data = res.data
  }
}

const clickVideo = function (chanpubid){
  console.log('clickVideo',chanpubid)
  seeVideo(chanpubid)
}

function tccw() {
  if(!areacode.value || "01" === areacode.value){
    isFirstFlagA.value = false
    //随机填充大车位
    generateRandomNumbers_dcw_a(state.right1Data.dcwzy_a, 700, 705)
    //随机填充危化品车位
    generateRandomNumbers_whp_a(state.right1Data.whpcwzy_a, 1, 4)
  } else if ("02" === areacode.value) {
    isFirstFlagB.value = false
    //随机填充大车位
    generateRandomNumbers_dcw_b(state.right1Data.dcwzy_b, 1, 23)
    //随机填充危化品车位
    generateRandomNumbers_whp_b(state.right1Data.whpcwzy_b, 24, 26)
  }
}

//随机填充大车位
function generateRandomNumbers_dcw_a(count, min, max) {
  if(count < 1){
    return
  }
  //隐藏
  for (let i = min; i <= max; i++) {
    $("#cw02-"+i).css("display", "none" )
  }
  const uniqueNumbers = getNiqueNumbers(count, min, max)
  if(uniqueNumbers && uniqueNumbers.length>0){
    for (let i = 0; i < uniqueNumbers.length; i++) {
      $("#cw02-"+uniqueNumbers[i]).css("display", "block" )
    }
  }

}
//随机填充大车位
function generateRandomNumbers_dcw_b(count, min, max) {
  if(count < 1){
    return
  }
  //隐藏
  for (let i = min; i <= max; i++) {
    let id = i;
    if (id < 10) {
      id = "00" + id;
    } else {
      id = "0" + id;
    }
    $("#cw01-"+id).css("display", "none" )
  }
  const uniqueNumbers = getNiqueNumbers(count, min, max)
  if(uniqueNumbers && uniqueNumbers.length>0){
    for (let i = 0; i < uniqueNumbers.length; i++) {
      let id = uniqueNumbers[i];
      if (id < 10) {
        id = "00" + id;
      } else {
        id = "0" + id;
      }
      $("#cw01-"+id).css("display", "block" )
    }
  }

}
//随机填充危化品车位
function generateRandomNumbers_whp_a(count, min, max) {
  if(count < 1){
    return
  }
  //隐藏
  for (let i = min; i <= max; i++) {
    $("#cw02-00"+i).css("display", "none" )
  }
  const uniqueNumbers = getNiqueNumbers(count, min, max)
  if(uniqueNumbers && uniqueNumbers.length>0){
    for (let i = 0; i < uniqueNumbers.length; i++) {
      $("#cw02-00"+uniqueNumbers[i]).css("display", "block" )
    }
  }

}
//随机填充危化品车位
function generateRandomNumbers_whp_b(count, min, max) {
  if(count < 1){
    return
  }
  //隐藏
  for (let i = min; i <= max; i++) {
    $("#cw01-0"+i).css("display", "none" )
  }
  const uniqueNumbers = getNiqueNumbers(count, min, max)
  if(uniqueNumbers && uniqueNumbers.length>0){
    for (let i = 0; i < uniqueNumbers.length; i++) {
      $("#cw01-0"+uniqueNumbers[i]).css("display", "block" )
    }
  }

}
function getNiqueNumbers(count, min, max) {
  if (count > (max - min + 1)) {
    count = max - min + 1
  }
  if(count){
    const uniqueNumbers = new Set();
    while (uniqueNumbers.size < count) {
      let ss = Math.floor(Math.random() * (max - min + 1)) + min
      uniqueNumbers.add(ss);
    }
    return Array.from(uniqueNumbers);
  }
}


//随机生成
function generateRandomNumbers_b(count, min, max) {
  for (let i = min; i <= max; i++) {
    $("#cw0"+i).css("display", "none" )
  }
  const uniqueNumbers = getNiqueNumbers(count, min, max)
  if(uniqueNumbers && uniqueNumbers.length>0){
    for (let i = 0; i < uniqueNumbers.length; i++) {
      $("#cw0"+uniqueNumbers[i]).css("display", "block" )
    }
  }
}

</script>
<style scoped>
.filler-table{
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  thead tr{
    margin-top: 3vh;
    line-height: 40px;
    height: 40px;
  }
  td,th{
    text-align: center;
  }
  tbody td{
    padding-bottom: 0.5vh;
    font-size: 80%;
    cursor: pointer;
    padding-top: 0.8vh;
  }
  tbody tr:hover{
    background: #602121;
  }
  .time{
    width: 130px;
  }
  .tr-select{
    background: #602121;
  }
}
.pie-list{
  padding-top: 2vh;
  text-align: center;
  .h1{
    font-size: 2vh;
  }
  .h2{
    font-size: 1.8vh;
    color: #00EAFF;
    position: relative;
    top: -2vh;
  }
  .pie-list-item{
    position: relative;
    top: -2vh;
    font-size: 1.4vh;
    padding-left: 1.8vh;
    .pie-square{
      width: 1.4vh;
      height: 0.8vh;
      background: #cccccc;
      position: relative;
      top: 1.2vh;
    }
    .pie-text{
      padding-left: 3vh;
      text-align: left;
    }

  }
}

.camera{
  background: url("../assets/img/security/相机.png") no-repeat;
  width: 1.6vh;
  height: 1.6vh;
  background-size: cover;
  margin-left: 25px
}
</style>
